<template>
	<!-- 检测费、上牌、报关和装箱费用 -->
	<view>
		<view class="cost-name">{{getStatusLabel(expenseType,type)}}</view>
		<view class="cost-amount">
			<text class="u-font-36">¥</text>
			<text>{{details.amount | thousands}}</text>
		</view>
		<!-- <view class="cost-notes">费用字段说明内容费用字段说明内容</view> -->

		<view class="const-details">
			<view class="u-flex u-row-between u-margin-bottom-24">
				<view>流水号</view>
				<view>{{details.innerId}}</view>
			</view>
			<view class="u-flex u-row-between">
				<view>支付方式</view>
				<view>{{getStatusLabel(paymentMethodType,details.payMode) || '未支付'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStatusLabel,
		expenseType,
		paymentMethodType
	} from '@/utils/status.js'
	export default {
		data() {
			return {
				type: null,
				details:{},
				expenseType,
				paymentMethodType
			}
		},
		onLoad(options) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('BillDetails', (res) => {
				this.details = res
			})
			
			
			if (options.type) {
				this.type = options.type * 1
				uni.setNavigationBarTitle({
					title: getStatusLabel(this.expenseType, this.type)
				})
			}
		
		},
		methods: {
			getStatusLabel
		}
	}
</script>

<style scoped lang="less">
	.cost-name {
		color: #202020;
		text-align: center;
		font-size: 15px;
		margin-top: 30px;
	}

	.cost-amount {
		color: #202020;
		font-size: 32px;
		font-weight: bold;
		text-align: center;
		margin-top: 10px;
	}

	.cost-notes {
		font-size: 12px;
		color: #999999;
		text-align: center;
		margin-top: 10px;
		
	}

	.const-details {
		background: #fff;
		padding: 15px;
		box-shadow: 0px 3 4px 0px rgba(217, 226, 233, 0.38);
		border-radius: 8px;
		color: #202020;
		font-size: 14px;
		margin: 30px 15px 0 15px;
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>